<html lang='zh-CN'>
<head>
<meta charset='utf-8'>
	<style>
		li {
			list-style-type: none;
		}
		.nav {
			margin:10px;
		}
		
		.nav>li {
			position:relative;
			float:left;
			width: 80px;
			height: 40px;
			text-align: center;
		}
		
		.nav li div{
			display: block;
			width: 100%;
			height: 100%;
			line-height: 40px;
			color: #333;
		}
		.nav>li>div:hover {
			background-color: #eee;
		}
		
		.nav ul {
			display: none;
			position: absolute;
			top: 40px;
			left: 0;
			width: 100%;
			border-left: 1px solid #fecc5b;
			border-right: 1px solid #fecc5b;
			padding: 0;
		}
		
		.nav ul li {
			border-bottom: 1px solid #fecc5b;
		}
		
		.nav ul li:hover {
			background-color: #fff5da;
		}
		
	</style>
</head>

<body>
	<ul class='nav'>
		<li>
			<div>发现</div>
			<ul>
				<li>Explore</li>
				<li>Enterprise</li>
				<li>Market</li>
			</ul>
		</li>
		<li>
			<div>我的</div>
			<ul>
				<li>Blog</li>
				<li>Reporsity</li>
				<li>Friend</li>
			</ul>
		</li>
		<li>
			<div>问题</div>
			<ul>
				<li>Education</li>
				<li>Insights</li>
				<li>Wiki</li>
			</ul>
		</li>
	</ul>
</body>

<script>
	var list = document.getElementsByClassName('nav')[0].children;
	for( var i=0; i<list.length; i++ ) {
	//console.log(list[i].firstChild);
	//console.log(list[i].lastChild);
	console.log(list[i].childNodes);
	console.log(list[i].parentNode);
		list[i].onmouseover = function () {
			
			this.children[1].style.display = 'block';
		}
		list[i].onmouseout = function () {
			this.children[1].style.display = 'none';
		}
	}
	
</script>
</html>